<template>
	<view>
		<swiper class="home-swiper" indicator-dots="true" autoplay="true" :interval="2000">
			<swiper-item v-for="(i,index) in list" :key="index">
				<view class="swiper-item uni-bg-red">
					<image :src="i.image" mode="scaleToFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<uni-title @getTitle="getTitleFun($event)" title1="朝夕名师" title2="在线直播" text1="直播互动学习,感受技术韵律"></uni-title>
		
		<view class="public-box">
			<view @click="goPublic(i.url,i.text)" v-for="(i,index) in publicList" class="public-list" :key="index">
				<image :src="i.image" mode=""></image>
				<text>{{i.text}}</text> 
			</view>
		</view>
		<!-- 标题加入朝夕 -->
		<uni-title title1="加入" title2="朝夕" text1="让每个人的职业生涯不留遗憾"></uni-title>
	
		<view class="job-box">
			<view v-for="(i,index) in job" :key="index" class="job-list">
				<image :src="i.image"></image>
				<view class="job-text-box">
					<text>{{i.title}}</text>
					<text>{{i.text}}</text>
				</view>
			</view>
		</view>
		
		<uni-title title1="合作" title2="伙伴" text1="人生道路上伙伴的支撑或不可缺"></uni-title>
		
		<image :src="partner" mode=""></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			// 轮播图图片
			list: [],
			publicList: [],
			job: [],
			partner: ''
			}
		},
		onLoad() {
			// 轮播图(请求)
			uni.request({
			    url: 'https://www.fastmock.site/mock/879378aa62ebe17ab98fcbab59be3425/uniapp/homeImage', //仅为示例，并非真实接口地址。
			    success: (res) => {
					this.list = res.data
			        // this.text = 'request success';
			    }
			});
			// 公开课(请求)
			uni.request({
			    url: 'https://www.fastmock.site/mock/879378aa62ebe17ab98fcbab59be3425/uniapp/public', //仅为示例，并非真实接口地址。
			    success: (res) => {
					this.publicList = res.data.data
			        // this.text = 'request success';
			    }
			});
			// 招聘(请求)
			uni.request({
			    url: 'https://www.fastmock.site/mock/879378aa62ebe17ab98fcbab59be3425/uniapp/job', //仅为示例，并非真实接口地址。
			    success: (res) => {
					this.job = res.data.data
			        // this.text = 'request success';
			    }
			});
			// 合作伙伴(请求)
			uni.request({
			    url: 'https://www.fastmock.site/mock/879378aa62ebe17ab98fcbab59be3425/uniapp/partner', //仅为示例，并非真实接口地址。
			    success: (res) => {
					this.partner = res.data.image
			        // this.text = 'request success';
			    }
			});
		},
		methods: {
			getTitleFun(text){
				console.log(text)
			},
			goPublic(url,title){
				// 保留当前页面，跳转到应用内的某个页面
				uni.navigateTo({
					url: `/pages/publicView/publicView?url=${url}&title=${title}`
				});
			}
		}
	}
</script>

<style scoped lang="scss">
/* .swiper-item{
	width: 100%;
	height: 200px;
} */
.swiper-item image{
	width: 100%;
	height: 200px;
}
.public-box{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
}
/* text-align使文字居中 */
.public-list{
	width: 48%;
	height: 120px;
	margin-bottom: 40px;
	text-align: center;
}
.public-list image{
	width: 100%;
	height: 120px;
	margin-bottom: 5px;
}
.public-list text{
	font-size: 12px;
	color: #999;
}
.job-box{
	padding: 10px;
}
.job-list{
	background-color: #fbfafb;
	display: flex;
	margin-bottom: 10px;
	align-items: center;
}
.job-list image{
	width: 40%;
	margin-right: 10px;
	height: 120px;
	border-radius: 10%;
}
.job-text-box{
	flex: 1;
	display: flex;
	flex-direction: column;
	
	text:nth-of-type(1){
		font-weight: 600;
		font-size: 18px;
		margin: 5px 0;
	}
	text:nth-of-type(2){
		color: #333;
		font-size: 14px;
	}
}
</style>
